<script setup>
import { ref, reactive, onMounted, defineProps, toRaw } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// nav导航栏的高度，后续需要调整
const navbarHeight = ref(180);
/* // 接收其他组件的数据方式1 通过$emit 传递数据，$on接受数据的方式拿到数据的值
uni.$on('sendHeight', (data) => {
	// console.log('nav导航栏的高度', data);
	navbarHeight.value = data;
}); */
// 接收其他组件的数据方式2 通过defineEmits传递，以及在接收方组件中使用
const attachHeight = (e) => {
	// console.log('navbar高度', e.detail.navBarHeight);
	navbarHeight.value = e.detail.navBarHeight;
};
// 根据api创建app实例
const app = getApp();
// 定义是否渲染提示广告信息
const ispromptShow = ref(true);
// 定义轮播图数据
const slideList = ref([]);
// 定义两个快捷入口
const nav2s = ref([]);
// 定义五个精选入口
const navs = ref([]);
// 定义医院列表的数据
const hospitalList = ref([]);
// 加载前请求数据
onLoad(() => {
	app.globalData.utils.getUserInfo();
	app.globalData.utils.request({
		url: '/app/init',
		success: (res) => {
			// console.log('首页地区请求到的地址', res);
			const { id } = res.data.area;
			// 通过id获取当前地区的页面数据
			app.globalData.utils.request({
				url: '/Index/index',
				data: {
					aid: id
				},
				success: ({ data }) => {
					// console.log(444, data);
					// 渲染轮播图的数据
					slideList.value = data.slides;
					// 渲染两个快捷入口的数据
					nav2s.value = data.nav2s;
					// 渲染五个精选入口的数据
					navs.value = data.navs;
					hospitalList.value = data.hospitals;
					// console.log('两个快捷入口详情',navs.value);
				}
			});
		}
	});
});
/* onShow(() => {
	getHeight();
	// console.log(111);
}); */
// 点击关闭按钮，不再显示提示广告
const changePrompt = () => {
	ispromptShow.value = false;
};
/* // 两个快捷入口的跳转
const onNav2Tap = (e) => {
	// 拿到当前点击的数据
	// console.log(e);
	const navQuick = toRaw(nav2s.value)[e.currentTarget.dataset.index];
	// 判断是否为内部数据
	console.log(navQuick);
	if (navQuick.stype == 1) {
		// 如果为内部数据，则根据stype_link的值进行跳转
		uni.navigateTo({
			url: navQuick.stype_link
		});
	}
}; */
// 五个精选入口的跳转
const onNavsTap = (e) => {
	// 拿到当前点击的数据
	// console.log(e);
	const navRecommend = toRaw(navs.value)[e.currentTarget.dataset.index];
	// 判断是否为内部数据
	// console.log('点击数据', navRecommend);
	// svid=1 代跑取药id =3 svid=4 尊享陪珍
	// svid=2 就医陪诊半天 svid = 3 就医陪诊（全天）
	let sid = 1;
	if (navRecommend.id === 3) {
		sid = 1; // 代跑取药
	} else if (navRecommend.id === 4) {
		sid = 2;
	} else if (navRecommend.id === 5) {
		sid = 3;
	} else if (navRecommend.id === 6) {
		sid = 3;
	} else if (navRecommend.id === 7) {
		sid = 4; // 尊享陪珍
	}
	const navRecommendUrl = `/pages/service/index?svid=${sid}&hid=5`;
	if (navRecommend.stype == 1) {
		// 如果为内部数据，则根据stype_link的值进行跳转
		uni.navigateTo({
			url: navRecommendUrl
		});
	}
};

// 将以上两个跳转进行封装
const navGo = (nav, type) => {
	// 判断是否为内部数据
	// console.log(nav);
	if (nav.stype == 1) {
		// 如果为内部数据，则根据stype_link的值进行跳转
		uni.navigateTo({
			url: nav.stype_link
		});
	}
};
// 两个快捷入口的跳转
const onNav2Tap = (e) => {
	// console.log(e);// 拿到当前点击的数据
	const navQuick = toRaw(nav2s.value)[e.currentTarget.dataset.index];
	navGo(navQuick, 'nav2s');
};
/* // 五个精选入口的跳转
const onNavsTap = (e) => {
	// console.log(111111, e); // 拿到当前点击的数据
	const navRecommend = toRaw(navs.value)[e.currentTarget.dataset.index];
	// console.log(222222, navRecommend);
	navGo(navRecommend, 'navs');
}; */
// 医院列表跳转
const goHosptial = (e) => {
	// console.log(e.currentTarget.dataset.hid);
	uni.navigateTo({
		url: '../hospital/index?hid=' + e.currentTarget.dataset.hid
	});
};
</script>

<!-- 主页内容区域 -->
<template>
	<view>
		<!-- 主页导航条 -->
		<navbar :isHome="true" @getHeight="sendHeight" @attachHeight="attachHeight" />
		<!-- 主页温馨提示条 -->
		<view v-show="ispromptShow" :style="'margin-top:' + navbarHeight + 'rpx;'" class="prompt">
			<view class="weui-cell">
				<view class="weui-cell-hd">
					<image src="../../static/resource/images/ic_myapp.png"></image>
				</view>
				<view class="weui-cell-bd">
					<text>点击右下角“添加到我的小程序”：方便下次找到</text>
				</view>
				<view class="weui-cell-ft" @click="changePrompt">
					<image src="../../static/resource/images/modal_closer.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-show="!ispromptShow" :style="'margin-top:' + navbarHeight + 'rpx;'"></view>
		<!-- 轮播图渲染 -->
		<view class="slides" v-if="slideList && slideList.length > 0">
			<swiper :indicator-dots="true" :autoplay="true" circular="true" :interval="3000" :duration="600">
				<block v-for="(item, index) in slideList" :key="index">
					<swiper-item>
						<image :src="item.pic_image_url" mode="widthFix" show-menu-by-longpress="true" :data-index="index"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 主页快捷入口 -->
		<view v-if="nav2s && nav2s.length > 0" class="nav2-list">
			<block v-for="(item, index) in nav2s" :key="index">
				<view class="nav2-item" :data-index="index" @click="onNav2Tap">
					<view class="nav2-pic">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
				</view>
			</block>
		</view>
		<!-- 五个精选服务入口 -->
		<view v-if="navs && navs.length > 0" class="nav-list">
			<block v-for="(item, index) in navs" :key="index">
				<view class="nav-item" :data-index="index" @click="onNavsTap">
					<view class="nav-pic">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
					<view class="nav-text" :style="'color:' + (item.tcolor ? item.tcolor : '')">
						{{ item.title }}
					</view>
				</view>
			</block>
		</view>
		<!-- 医院列表及介绍 -->
		<view class="weui-cells hosp-list">
			<view class="weui-cell hosp-item weui-cell_access" v-for="(item, index) in hospitalList" :key="item.id" :data-hid="item.id" @click="goHosptial">
				<view class="weui-cell_hd">
					<image class="hosp-avatar" :src="item.avatar ? item.avatar_url : '../../static/resourse/images/avatar.jpg'" mode="aspectFill"></image>
				</view>
				<view class="weui-cell__bd">
					<view>
						<text class="hosp-name">{{ item.name }}</text>
					</view>
					<view class="hosp-line">
						<text class="hosp-rank">{{ item.rank }}</text>
						<text class="hosp-label">{{ item.label }}</text>
					</view>
					<view class="hosp-line">
						<text class="hosp-intro">{{ item.intro }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<!-- 页面样式布局效果 -->
<style>
page {
	background-color: #fff;
}
.weui-cell {
	background-color: #fff9eb;
	display: flex;
	justify-content: space-around;
}
.weui-cell .weui-cell-hd image {
	display: block;
	width: 40rpx;
	height: 40rpx;
	margin-right: 14rpx;
}
.weui-cell .weui-cell-bd text {
	color: #be9719;
	font-size: 13px;
}
.weui-cell .weui-cell-ft image {
	display: block;
	width: 15px;
	height: 15px;
	/* margin-right: 14rpx; */
}
/* 轮播图效果 */
.slides {
	padding: 20rpx 20rpx 0 20rpx;
	overflow: hidden;
}
.slides swiper {
	height: 320rpx;
	border-radius: 15rpx;
	overflow: hidden;
}
.slides swiper swiper-item image {
	width: 100%;
	height: 100%;
}
.nav2-list {
	margin: 10rpx 20rpx 0 20rpx;
}
.nav2-list::after {
	content: '';
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}
.nav2-item {
	float: left;
	margin-top: 20rpx;
	width: 50%;
	text-align: center;
	box-sizing: border-box;
	padding: 0 5rpx;
}
.nav2-pic {
	width: 100%;
}
.nav2-pic image {
	display: block;
	width: 100%;
}
.nav-list::after {
	content: '';
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}
.nav-item {
	float: left;
	margin-top: 20rpx;
	width: 20%;
	text-align: center;
	padding: 10rpx 0;
}
.nav-pic image {
	display: block;
	margin: 0 auto;
	width: 110rpx;
	height: 110rpx;
}
.nav-text {
	font-size: 24rpx;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
}

.hosp-list {
	margin: 10rpx 0 0 0;
	background: none;
}
.hosp-list::before {
	display: none;
}
.hosp-list::after {
	display: none;
}

.hosp-item {
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}
.hosp-item::before {
	display: none;
}
.hosp-item::after {
	display: none;
}
.hosp-name {
	font-weight: bold;
	font-size: 34rpx;
}
.hosp-avatar {
	display: block;
	width: 200rpx;
	height: 180rpx;
	border-radius: 10rpx;
	overflow: hidden;
	margin-right: 20rpx;
}
.hosp-line {
	margin-top: 5rpx;
}
.hosp-line text {
	font-size: 26rpx;
}
.hosp-rank {
	font-weight: bold;
	color: #0bb585;
	margin-right: 15rpx;
}
.hosp-label {
	font-weight: bold;
	color: #0ca7ae;
	margin-right: 15rpx;
}
.hosp-intro {
	color: #999999;
}
</style>
